﻿<DemoPageSectionComponent Id="FileManagement-Upload-Overview">
    @inject NavigationManager NavigationManager

    <div id="overviewDemoDropZone" class="card custom-drop-zone bg-light rounded-3 w-100 m-0">
        <span class="drop-file-icon mb-3"></span>
        <span>Drag and Drop File Here</span><span class="m-1">or</span>
        <button id="overviewDemoSelectButton" class="btn border-primary btn-primary m-1">Select File</button>
    </div>
    <DxUpload Name="myFile"
              Visible="@UploadVisible"
              ExternalSelectButtonCssSelector="#overviewDemoSelectButton"
              ExternalDropZoneCssSelector="#overviewDemoDropZone"
              ExternalDropZoneDragOverCssClass="bg-light border-secondary text-dark"
              MaxFileSize="15000000"
              UploadUrl="@GetUploadUrl("api/Upload/Upload/")"
              SelectedFilesChanged="@SelectedFilesChanged">
    </DxUpload>

    @code {
        bool UploadVisible { get; set; } = false;

        protected void SelectedFilesChanged(IEnumerable<UploadFileInfo> files) {
            UploadVisible = files.ToList().Count > 0;

            InvokeAsync(StateHasChanged);
        }
        protected string GetUploadUrl(string url) {
            return NavigationManager.ToAbsoluteUri(url).AbsoluteUri;
        }
    }
</DemoPageSectionComponent>
